import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'

import { TitlebarStyled }  from './StyledTitlebar'


import UIButton from '../UIButton/UIButton'

import Page404 from 'pages/page404/page404'

class Titlebar extends Component {

  render() {
    console.log(this.props)
    
    return (
      <TitlebarStyled {...this.props}>
        {
          this.props.barArr.map((value,index)=>(
            <UIButton key={index}
            clickButton={()=>this.onClickButtons(value)}
            selected = {value.tag === this.props.taskIndex}
           
            width = {(1/this.props.barArr.length*100)+'%'}
           
            tag ={value.tag}
            numSize = {this.props.numSize?this.props.numSize:".23rem"}
            numColor = {this.props.numColor?this.props.numColor:"#646464"}
            num={value.num}
            numWidth = {this.props.numWidth?this.props.numWidth:'auto'}
            numHeigh = {this.props.numHeigh?this.props.numHeigh:".45rem"}
            numTextAlign = "center"

            titleWidth = {this.props.titleWidth?this.props.titleWidth:'auto'}
            titleHeigh = {this.props.titleHeigh?this.props.titleHeigh:".45rem"}
            titleLineHeight = {this.props.titleLineHeight?this.props.titleLineHeight:".2rem"}
            title={value.title}
            titleBorderWidth = {this.props.titleBorderWidth?this.props.titleBorderWidth:'0'}
            titleBorderStyle = 'solid'
            titleBorderColor = {this.props.titleBorderColor?this.props.titleBorderColor:'#fff'}
            selectedTitleBorderColor = {this.props.selectedTitleBorderColor?this.props.selectedTitleBorderColor:'#FFB538'}
            titleColor = {this.props.titleColor?this.props.titleColor:"#707070"}
            titleSize = {this.props.titleSize?this.props.titleSize:".18rem"}
            ></UIButton>
          ))
        }
        
      </TitlebarStyled>
    );
  }
  onClickButtons(value){
    
    if(value.tag === this.props.taskIndex){
      console.log('点击选中')

    }else{
      // this.setState({
      //   selected : value.tag
      // })
      this.props.history.replace(value.routePath)
      // console.log(this.props)
      // console.log(value.tag,value.routePath)

    }
    
  }
}

export default withRouter(Titlebar);